import $ from 'jquery'

class MyKityFormulaMenu {
  constructor() {
    this.title = '编辑公式'
    this.iconSvg = '<svg t="1736298820386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4299" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 928H128a32 32 0 0 1-26.88-49.92L345.6 512 101.12 145.92A32 32 0 0 1 128 96h384a32 32 0 0 1 0 64H187.52l223.36 334.08a33.28 33.28 0 0 1 0 35.84L187.52 864H512a32 32 0 0 1 0 64zM640 928a36.48 36.48 0 0 1-17.92-5.12 32.64 32.64 0 0 1-8.96-44.8l256-384a32 32 0 0 1 53.76 35.84l-256 384a33.28 33.28 0 0 1-26.88 14.08z" fill="#595959" p-id="4300"></path><path d="M896 928a33.28 33.28 0 0 1-26.88-14.08l-256-384a32 32 0 1 1 53.76-35.84l256 384a32.64 32.64 0 0 1-8.96 44.8 36.48 36.48 0 0 1-17.92 5.12zM992 224h-320a32 32 0 0 1 0-64h320a32 32 0 0 1 0 64z" fill="#595959" p-id="4301"></path><path d="M832 384a32 32 0 0 1-32-32v-320a32 32 0 0 1 64 0v320a32 32 0 0 1-32 32z" fill="#595959" p-id="4302"></path></svg>'
    this.tag = 'button'
    this.showModal = true
    this.modalWidth = 900
  }

  // 菜单是否需要激活（如选中加粗文本，“加粗”菜单会激活），用不到则返回 false
  isActive(editor) {
    return false
  }

  // 获取菜单执行时的 value ，用不到则返回空 字符串或 false
  getValue(editor) {
    return ''
  }

  // 菜单是否需要禁用（如选中 H1 ，“引用”菜单被禁用），用不到则返回 false
  isDisabled(editor) {
    return false
  }

  // 点击菜单时触发的函数
  exec(editor, value) {
    // Modal menu ，这个函数不用写，空着即可
  }

  // 弹出框 modal 的定位：1. 返回某一个 SlateNode； 2. 返回 null （根据当前选区自动定位）
  getModalPositionNode(editor) {
    return null // modal 依据选区定位
  }

  // 定义 modal 内部的 DOM Element
  getModalContentElem(editor) {
    // panel 中需要用到的id
    const inputIFrameId = 'kityformula_' + Math.ceil(Math.random() * 10)
    const btnOkId = 'kityformula-btn' + Math.ceil(Math.random() * 10)

    const $content = $(`<div></div>`)
    const $button = $(`
        <div id="${btnOkId}" class="top" style="background: #28b28b;width: 120px;height: 40px;border-radius: 30px;margin-bottom: 20px;color: #ffffff;display: flex;justify-content: center;align-items: center;cursor: pointer;user-select: none;">
           确认插入
        </div>
    `)
    const $iframe = $(`
      <div style=" width: 100%;height: 500px;overflow: auto">
        <iframe id="${inputIFrameId}" class="iframe" height="560px" width="100%" frameborder="0" scrolling="no" src="/kityformula/index.html"></iframe>
      </div>
    `)
    $content.append($button)
    $content.append($iframe)
    $button.on('click', () => {
      // 执行插入公式
      const node = document.getElementById(inputIFrameId)
      const kfe = node.contentWindow.kfe

      kfe.execCommand('get.image.data', async(data) => {
        // 获取base64
        // if (data.img.indexOf("data:image/png;base64,") === 0) {
        //   data.img = data.img.replace("data:image/png;base64,", "");
        // }
        // let file = base64ToFile(data.img, "kityformula_image.png", "image/png");
        // let res = await uploadOSS(file);
        // console.log(res)
        // const ImageElement = {
        //   type: "image",
        //   src: res[0],
        //   style:'width: auto;height:18px;',
        //   children: [
        //     {
        //       text: "",
        //     },
        //   ],
        // };
        // console.log(editor, '编辑器');
        // editor.insertNode(ImageElement);
        // editor.hidePanelOrModal();
      })
      //
      let latex = kfe.execCommand('get.source')
      latex = latex.replace(/\s/g, '') // 去掉空格

      const formulaNode = {
        type: 'paragraph',
        children: [
          {
            type: 'formula',
            value: latex,
            children: [
              {
                text: ''
              }
            ]
          }
        ]
      }
      console.log(editor, '编辑器')
      editor.insertNode(formulaNode)
      editor.hidePanelOrModal()
    })

    return $content[0] // 返回 DOM Element 类型

    // PS：也可以把 $content 缓存下来，这样不用每次重复创建、重复绑定事件，优化性能
  }
}

const menuConf = {
  key: 'kityFormula', // menu key ，唯一。注册之后，需通过 toolbarKeys 配置到工具栏
  factory() {
    return new MyKityFormulaMenu()
  }
}

export default menuConf
